<div class="w-full pac-page-body-toolbar p-1">
  <div></div>
  <div ngmButtonGroup>
    <button mat-raised-button color="primary" [cdkMenuTriggerFor]="orgMenu">
      <div class="flex items-center">
        <mat-icon fontSet="material-icons-outlined">add</mat-icon>
        {{ 'PAC.ACTIONS.ADD' | translate: {Default: "Add"} }}
      </div>
    </button>
  </div>
</div>

<div class="p-2">
  <ngm-table class="overflow-hidden rounded-lg border border-gray-200 mt-2"
    paging
    [data]="userOrganizations()"
    [columns]="[
      {
        name: 'organization.name',
        caption: 'PAC.KEY_WORDS.ORGANIZATION' | translate: {Default: 'Organization'}
      },
      {
        name: 'organization.short_description',
        caption: 'PAC.KEY_WORDS.Description' | translate: {Default: 'Description'}
      },
      {
        name: 'action',
        caption: 'PAC.KEY_WORDS.ACTION' | translate: { Default: 'Action' },
        cellTemplate: actionTempl,
        stickyEnd: true
      }
    ]"
  />
</div>


<ng-template #userTempl let-user>
  <pac-user-profile-inline [user]="user"></pac-user-profile-inline>
</ng-template>

<ng-template #actionTempl let-loading="loading" let-id="id" let-organization="organization">
  <button mat-icon-button ngmAppearance="danger" displayDensity="cosy" class="text-gray-400"
    [disabled]="loading"
    (click)="removeOrg(id, organization)">
    <div class="flex justify-center items-center">
      <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
    </div>
  </button>
</ng-template>

<ng-template #orgMenu >
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem *ngFor="let org of organizations()" (click)="addOrg(org)">
      {{org.name}}
    </button>
  
    <div *ngIf="!organizations()?.length" class="p-4">
      {{ 'PAC.Users.NoMoreOrganizations' | translate: { Default: 'No more organizations can be added' } }}
    </div>
  </div>
</ng-template>

